<script setup lang="ts">

import HomeAside from "@/views/Home/components/HomeAside.vue";
import HomeBreadcrumb from "@/views/Home/components/HomeBreadcrumb.vue";
import HomeHeader from "@/views/Home/components/HomeHeader.vue";
import HomeMain from "@/views/Home/components/HomeMain.vue";

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <HomeHeader></HomeHeader>
      </el-header>
      <el-container>
        <el-aside>
          <HomeAside></HomeAside>
        </el-aside>
        <el-main>
          <HomeBreadcrumb></HomeBreadcrumb>
          <HomeMain></HomeMain>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.el-header{
  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, .05);
}
.el-aside{
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05);
}

.el-main{
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
}
</style>